<template>
	<div class="content_page">
		<div class="content_page_item">
			<div class="title" :style="{ fontSize: globalFont == 'small_font' ? '28rpx' :globalFont == 'small-medium'? '32rpx':'36rpx' }">设备名称</div>
			<up-input placeholder="请输入设备名称" border="none" v-model="submitForm.equipmentName"
				inputAlign="right"></up-input>
		</div>
		<div class="content_page_item">
			<div class="title" :style="{ fontSize: globalFont == 'small_font' ? '28rpx' :globalFont == 'small-medium'? '32rpx':'36rpx' }">设备编号</div>
			<up-input placeholder="请输入设备编号" border="none" v-model="submitForm.equipmentNo" :disabled="true"
				disabledColor="#ffffff" inputAlign="right"></up-input>
		</div>
		<div class="content_page_item">
			<div class="title" :style="{ fontSize: globalFont == 'small_font' ? '28rpx' :globalFont == 'small-medium'? '32rpx':'36rpx' }">设备类型</div>
			<up-input placeholder="请输入设备类型" border="none" v-model="submitForm.categoryName" :disabled="true"
				disabledColor="#ffffff" inputAlign="right"></up-input>
		</div>
		<div class="content_page_item" @click="chooseGroup" style="padding-right: 10rpx">
			<div class="title" :style="{ fontSize: globalFont == 'small_font' ? '28rpx' :globalFont == 'small-medium'? '32rpx':'36rpx' }">分组</div>
			<div class="flex_center">
				<div class="groupPla" :class="{ active: isactive }">
					{{
						submitForm.groupId == "" ? "请选择设备分组" : submitForm.groupName
					}}
				</div>
				<image src="/static/myInfo/icon_arrow.png"></image>
			</div>
		</div>
		<div class="content_page_item">
			<div class="title" :style="{ fontSize: globalFont == 'small_font' ? '28rpx' :globalFont == 'small-medium'? '32rpx':'36rpx' }">安装位置</div>
			<up-input placeholder="请输入安装位置" border="none" v-model="submitForm.installLocation"
				inputAlign="right"></up-input>
		</div>
		<!-- 分组 -->
		<up-popup :show="shoeModal" z-index="999999999" mode="bottom" :round="16">
			<view class="title addtitle">
				<div style="width: 40rpx"></div>
				<text>移动分组</text>
				<image src="/static/home/close.png" @click="shoeModal = false"></image>
			</view>
			<view class="part borderLine mt114">
				<up-picker ref="pickerref" :show="shoeModal" :columns="[deviceSort]" keyName="groupName"
					@change="changeHandle" :defaultIndex="defaultIndex"></up-picker>
				<view class="modalBtn">
					<view class="btn" @click="confirm">确认</view>
				</view>
			</view>
		</up-popup>
		<div class="submit_btn" @click="toSave" :style="{ fontSize: globalFont == 'small_font' ? '28rpx' :globalFont == 'small-medium'? '32rpx':'36rpx' }">保存</div>
		<!-- 验证是否绑定手机号111 -->
		<up-modal :show="bindInfo.show" title="提示" confirmText="去授权" :showCancelButton="true" @confirm="tobindPhone"
			@cancel="bindInfo.show = false">
			<view class="slot-content">
				<rich-text :nodes="bindInfo.content"></rich-text>
			</view>
		</up-modal>
	</div>
</template>
<script lang="ts" setup>
import { onLoad, onShow } from "@dcloudio/uni-app";
import { ref, getCurrentInstance } from "vue";
import type { DeviceSortType, addDeviceType } from "@/api/index/type.ts";
import type { resdetailType } from "@/api/detail/type.ts";
import { deviceDetail } from "../../api/detail/detail.ts";
import { deviceSortFn, addDeviceFn } from "../../api/index/index.ts";
import { personInfoFn } from "@/api/myInfo/myInfo.ts";

const submitForm = ref<addDeviceType>({
	equipmentId: '',
	equipmentName: "",
	equipmentNo: "",
	categoryName: "",
	groupId: "",
	groupName: "",
	installLocation: "",
});
const bindInfo = ref({
	show: false,
	content: `如果需要添加设备<br>  
                     请授权获取您的手机号`
})
const shoeModal = ref(false);
const deviceSort = ref<DeviceSortType[]>([]);
const getsortList = () => {
	deviceSortFn()
		.then((res: resdetailType) => {
			if (res.resultStatus) {
				deviceSort.value = res.resultData;
				submitForm.value.groupName = deviceSort.value[0].groupName
				submitForm.value.groupId = deviceSort.value[0].groupId
			} else {
				uni.showToast({
					title: res.errorMessage,
					icon: "none",
				});
			}
		})
		.catch((err: any) => {
			uni.showToast({
				title: "服务器异常",
				icon: "none",
			});
		});
};
const chooseGroup = () => {
	getsortList();
	shoeModal.value = true;
};
const changeHandle = (e: any) => {
	submitForm.value.groupId = e.value[0].groupId;
	submitForm.value.groupName = e.value[0].groupName;
};
const isactive = ref(false);
const pickerref = ref<any>(null);
const defaultIndex = ref([]);
const confirm = () => {
	defaultIndex.value = pickerref.value.innerIndex;
	isactive.value = true;
	shoeModal.value = false;
};
// 获取设备详细信息
const getdeviceInfo = (equipmentId: number) => {
	deviceDetail(equipmentId)
		.then((res: any) => {
			if (res.resultStatus) {
				const { equipmentId, equipmentName, equipmentNo, categoryName, groupId, groupName, installLocation } = res.resultData				
				submitForm.value = {
					equipmentId: equipmentId,
					equipmentName: equipmentName||equipmentNo,
					equipmentNo: equipmentNo,
					categoryName: categoryName,
					groupId: groupId,
					groupName: groupName,
					installLocation: installLocation,
				}
			} else {

			}
		})
		.catch((err: any) => {
			console.log(err, 'errr');
			uni.showToast({
				title: "服务器异常",
			});
		})
};
// 授权手机号
const tobindPhone = () => {
	uni.navigateTo({
		url: "/pages/settingInfo/bindphone/index",
	});
}
const personInfo = ref()
const getData = () => {
	personInfoFn()
		.then((res: any) => {
			if (res.resultStatus) {
				personInfo.value = res.resultData;
				if (personInfo.value.phoneNumber) {
					bindInfo.value.show = false
				}
			} 
		})
		.catch((err: any) => {
			
		});
};
const isLoading = ref(false);
const instance = getCurrentInstance();
const appStorage = instance?.appContext.config.globalProperties.appStorage; // 获取全局变量
const toSave = () => {
	if (!personInfo.value.phoneNumber) {
		bindInfo.value.show = true;
		return
	}
	wx.requestSubscribeMessage({
		tmplIds: ["sw533vkvQl1sDhQWtMCwTPEYJQ3b7qnMmk75MwqlNrk"],
		success(res) {
			console.log(res, 'ressssss')
		}
	})
	if (isLoading.value) {
		return
	}
	isLoading.value = true;
	uni.showLoading({
		title: "操作中...",
		icon: 'none'
	})
	addDeviceFn({
		equipmentId: submitForm.value.equipmentId,
		equipmentName: submitForm.value.equipmentName,
		groupId: submitForm.value.groupId,
		installLocation: submitForm.value.installLocation
	}).then((res: any) => {
		if (res.resultStatus) {
			uni.showToast({
				title: "设备添加成功",
				icon: 'none'
			})
			uni.switchTab({
				url: '/pages/index/index',
			})
		} else {
			uni.showToast({
				title: res.errorMessage,
				icon: 'none',
				duration: 4000
			})
		}
	}).catch((err: any) => {
		console.log(err);
		uni.showToast({
			title: "服务器异常",
			icon: "none"
		})
	}).finally(() => {
		setTimeout(() => {
			uni.hideLoading()
			isLoading.value = false
		}, 1000)
	})
};
const globalFont = ref()
onLoad((options) => {
	const userInfo_key = appStorage.getObj("userInfo_key");
	globalFont.value = userInfo_key.smallFont
	const equipmentId = options?.equipmentId || decodeURIComponent(options?.q).split("?")[1].split("=")[1]
	submitForm.value.equipmentId = Number(equipmentId);
	appStorage.setObj("equipmentId", equipmentId)
	getdeviceInfo(submitForm.value.equipmentId);
});
const userInfo = ref()
const hasLogin = ref()
onShow(() => {
	getData()
	hasLogin.value = appStorage.getObj("userInfo_key");
	if (!hasLogin.value.accessToken) {
		uni.showToast({
			title: '请先登录',
			icon: 'none',
			duration: 1000,
			success: () => {
				setTimeout(() => {
					uni.navigateTo({
						url: '/pages/login/login',
					});
				}, 500);  
			}
		});
	}
	const hasequimentId = appStorage.getObj("equipmentId");
	if (Object.keys(hasequimentId).length !== 0) {
		getdeviceInfo(appStorage.getObj("equipmentId"));
	}	
})
</script>
<style lang="scss" scoped>
.content_page {
	background-color: #fff;
	padding: 0 32rpx;

	&_item {
		padding: 30rpx 32rpx;
		border-bottom: 2rpx solid #f5f6f7;
		display: flex;
		justify-content: space-between;
		align-items: center;

		image {
			width: 24rpx;
			height: 24rpx;
			margin-left: 10rpx;
		}

		.groupPla {
			font-size: 28rpx;
			color: #cacaca;
		}

		.active {
			color: #333;
		}

		.title {
			font-size: 30rpx;
			color: #333;
		}
	}

	.submit_btn {
		height: 88rpx;
		background: linear-gradient(90deg, #00a67e, #006d56);
		font-size: 36rpx;
		line-height: 88rpx;
		color: #fff;
		text-align: center;
		border-radius: 16rpx;
		margin: 70rpx auto;
	}
}
</style>
<style scoped lang="scss">
.slot-content {
	font-size: 28rpx;
	color: #666666;
	line-height: 40rpx;


}
</style>
